<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./0.css">
</head>

<body>
    <div class="HOME">
        <div class="header">
            <div class="header-left">
                <h1 style="color: aliceblue;">ban</h1>
                <h1 style="color: rgb(187, 177, 43);">yuan</h1>
            </div>
            <div class="header-right">
                <button class="btn">=</button>
                <div class="right">
                    <p class="header-top-right" style="color: rgb(187, 177, 43);" onClick="scrollInto('.HOME')">HOME</p>
                    <p class="header-top-right" style="color: aliceblue;" onClick="scrollInto('.about')">ABOUT</p>
                    <p class="header-top-right" style="color: aliceblue;" onClick="scrollInto('.services')">SERVIES</p>
                    <p onClick="scrollInto('.BLOG')" class="header-top-right" style="color: aliceblue;">BLOG</p>
                    <p onClick="scrollInto('.CONTACTUS')" class="header-top-right" style="color: aliceblue;">CONTACT US
                    </p>
                </div>
            </div>
        </div>
        <div class="body">
            <h4 class="body-child">WE ARE AT BANYUAN</h4>
            <h1 class="body-child">STARTING A NEW JOURMEY!!</h1>
        </div>
    </div>
    <div class="about" style="background-color: rgb(210, 213, 216);">
        <div class="container">
            <div class="row">
                <div class="about-body">
                    <div class="col-xs-12">
                        <h1>WHAT WE DO</h1>
                        <h4>Lorem ipsum dolor sit amet,
                            consectectetur adiposcing elit,sed do eiusmod </h4>
                        <h4>tempor incididunt ut labore et dolore magna aliqua</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="about-row">
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <h1 class="initial">Design And Decelopement</h1>
                        <div>Lorem ipsum dolor sit amet,consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqya.</div>
                        <div style="color: rgb(187, 177, 43);">leam more...</div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <h1 class="initial">Website Maintenance</h1>
                        <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit,
                            sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqya.</div>
                        <div style="color: rgb(187, 177, 43);">leam more...</div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <h1 class="initial">Seo Optimization</h1>
                        <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit,
                            sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqya.</div>
                        <div style="color: rgb(187, 177, 43);">leam more...</div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <h1 class="initial"> Digital Marketing</h1>
                        <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit,
                            sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqya.</div>
                        <div style="color: rgb(187, 177, 43);">leam more...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="services">
        <div class="services-container">
            <div class="row">
                <div class="services-body">
                    <div class="col-md-12">
                        <h1>OUR RECENT WORKS</h1>
                        <h4>Lorem ipsum dolor sit amet, consectectetur
                            adiposcing elit,sed do eiusmod </h4>
                        <h4>tempor incididunt ut labore et dolore magna aliqua</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt1.jpg" class="services-img">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt2.jpg" class="services-img">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt3.jpg" class="services-img">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt4.jpg" class="services-img">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt5.jpg" class="services-img">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt6.jpg" class="services-img">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div id="blog" class="BLOG">
        <div class="BLOG-container">
            <div class="row" class="">
                <div class="blog-body">
                    <div class="col-md-12">
                        <h1>LATEST FROM OUR BLOG</h1>
                        <h4>Lorem ipsum dolor sit amet,
                            consectectetur adiposcing elit,sed do eiusmod </h4>
                        <h4>tempor incididunt ut labore et dolore magna aliqua</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" id="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt7.jpg" class="blog-img">
                    <div class="blogbox">
                        <h2>This is Lorem lpsum Heading</h2>
                        <div class="blogchild">
                            Posted in: Legai Advice
                            <img src="./img/消 息 (1).svg" alt="" class="blogleft-img">12
                            <img src="./img/眼睛.svg" alt="" class="blogleft-img">11
                        </div>
                        <div>We cannot expect people to have respect for laws and
                            orders until we teach respect to those we have entrusted
                            to enforce those laws all the time,
                            we always want to help people cordially.</div>
                        <div>read more ➡️</div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt8.jpg" class="blog-img">
                    <div class="blogbox">
                        <h2>This is Lorem lpsum Heading</h2>
                        <div class="blogchild">
                            Posted in: Legai Advice
                            <img src="./img/消 息 (1).svg" alt="" class="blogleft-img">12
                            <img src="./img/眼睛.svg" alt="" class="blogleft-img">11
                        </div>
                        <div>We cannot expect people to have respect for laws and
                            orders until we teach respect to those we have entrusted
                            to enforce those laws all the time,
                            we always want to help people cordially.</div>
                        <div>read more ➡️</div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/bjt9.jpg" class="blog-img">
                    <div class="blogbox">
                        <h2>This is Lorem lpsum Heading</h2>
                        <div class="blogchild">
                            Posted in: Legai Advice
                            <img src="./img/消 息 (1).svg" alt="" class="blogleft-img">12
                            <img src="./img/眼睛.svg" alt="" class="blogleft-img">11
                        </div>
                        <div>We cannot expect people to have respect for laws and
                            orders until we teach respect to those we have entrusted
                            to enforce those laws all the time,
                            we always want to help people cordially.</div>
                        <div>read more ➡️</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="CONTACTUS">
        <div class="contactus-container">
            <div class="row">
                <div class="services-body">
                    <div class="col-md-12">
            <h1>KEEP IN TOUCH WITH US</h1>
            <h3>Lorem ipsum dolor sit amet,
                consectectetur adiposcing elit,sed do eiusmod </h3>
            <h3>tempor incididunt ut labore et dolore magna aliqua</h3>
        </div>
    </div>
</div>
</div>
        <div class="container" id="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <img src="./img/位置.svg" class="contact ">
                    <img src="./img/邮箱.svg" class="contact ">
                    <img src="./img/电话.svg" class="contact ">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <h4 style="color: rgb(242, 245, 247);">紫东国际创意园b9栋</h4>
                    <h4 style="color: aliceblue;">banyuan.club</h4>
                    <h4 style="color: aliceblue;">1234567</h4>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div>your message has been sent. thank you</div>
                    <div style="display: flex;">
                        <input type="text" style="width: 200px;" placeholder="your name">
                        <input type="text" style="width: 200px;" placeholder="you email">
                    </div>
                    <div class="contactus-input">
                        <input type="text" style="width: 300px;" placeholder="subject">
                    </div>
                    <div>
                        <input type="text" style="width: 300px; 
                        height: 100px; margin-bottom: 100px;" placeholder="message">
                        <button class="contactus-btn">SEND NOW</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="./jquery3.5.min.js"></script>
    <script src="./work.js"></script>
</body>

</html>